<template>
	<view class="z_index2 TUI-Emoji">
		<!-- <view v-for="(item, index) in emojiList" :key="index" class="TUI-emoji-image">
			<image :data-name="item.emojiName" class="emoji-image" :src="item.url" @tap="handleEnterEmoji"></image>
		</view> -->

		<swiper class="swiper">
			<swiper-item v-for="(item,index) in emojiList">
				<view class="swiper-box">
					<view v-for="(im, ix) in item" :key="ix" class="TUI-emoji-image">
						<image :data-name="im.emojiName" class="emoji-image" :src="im.url" @tap="handleEnterEmoji">
						</image>
					</view>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import {
		emojiName,
		emojiUrl,
		emojiMap
	} from '../../../base/emojiMap';

	export default {
		data() {
			return {
				emojiList: []
			};
		},

		components: {},
		props: {},

		beforeMount() {
			// for (let i = 0; i < emojiName.length; i++) {
			// 	this.emojiList.push({
			// 		emojiName: emojiName[i],
			// 		url: emojiUrl + emojiMap[emojiName[i]]
			// 	});
			// }
			// console.log(this.emojiList)
			// this.setData({
			// 	emojiList: this.emojiList
			// });
			this.initEmoji()
		},

		methods: {
			initEmoji() {
				let i = 0
				let newArr = []
				let newList = []
				let length = emojiName.length;
				for (let key in emojiName) {
					i++
					newArr.push({
						emojiName: emojiName[key],
						url: emojiUrl + emojiMap[emojiName[key]]
					})
					if (((i / 32) % 1) === 0) {
						newList.push(newArr)
						newArr = []
					} else if (newList.length === parseInt(length / 32)) {
						if (i === length) {
							newList.push(newArr)
						}
					}
				}
				this.setData({
					emojiList: newList
				});
			},


			handleEnterEmoji(event) {
				this.$emit('enterEmoji', {
					detail: {
						message: event.currentTarget.dataset.name
					}
				});
			}

		}
	};
</script>
<style lang="scss" scoped>
	/* @import "./index.css"; */
	.TUI-Emoji {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
		height: 480rpx;
		overflow-y: scroll;
		background-color: #fff;

		.swiper {
			width: 100%;
			height: 100%;

			.swiper-box {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				grid-template-rows: 100rpx 100rpx 100rpx 100rpx;
				grid-gap: 10rpx 0rpx;
				align-items: center;
				justify-items: center;
			}


		}
	}

	.TUI-emoji-image {
		width: 9vw;
		height: 9vw;
	}

	.emoji-image {
		width: 100%;
		height: 100%;
	}
</style>